<template>
  <avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen" @date-change="dateChange">
      <template slot-scope="scope" slot="menuBtn">
      <el-dropdown-item divided @click.native="tip">自定义按钮</el-dropdown-item>
    </template>
    <template slot-scope="scope" slot="menu">
      <el-button size="small" @click.native="tip">自定义按钮2</el-button>
    </template>
  </avue-crud>
</template>


<script>
export default {
  mounted() {
        this.dateChange('-1');
  },
  data() {
      return {
        obj:{},
        data: [
          {
            name:'张三',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }, {
            name:'李四',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'王五',
            sex:'女',
            date:'1994-02-23 00:00:00'
          }, {
            name:'赵六',
            sex:'男',
            date:'1994-02-23 00:00:00'
          }
        ],
        option:{
          title:'avue表单基础使用',
          menuType:'menu',
          align:'left',
          dateBtn:true,  
          selection:true, 
          dateDefault:false,
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            },
            {
              label:'性别',
              prop:'sex'
            },{
              label: "日期",
              prop: "date",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
            }
          ]
        }
      }
    },
    methods: {
      beforeOpen() {
        console.log(this.obj)
      },
      dateChange(date) {
        this.$message(date);
      },
    }
  }
</script>